<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        *{
        	margin:0;
        	padding:0;
        }
        .wraper{
        	position:relative;
        	display: inline-block;
			margin:200px 200px 200px 0;
			border:1px solid #000;
        }
        #text{
        	width:500px;
			border:none;
			outline:none;
			vertical-align: middle;
        }
        .label{
        	display: inline-block;
        }
        </style>
    </head>
    <body>
    <label for="text">标签: </label>
    <div class="wraper" id="wraper">
    	<input type="text" id="text">
    </div>
    </body>
    <script type="text/javascript">
    	text.oninput = function(e){

    		var self = this;
    		if(this.value.trim().length === 0 ) return;
    		// document.addEventListener('keydown', handleKeyDown(event,self));
    		// document.removeEventListener('keydown', handleKeyDown(e,self))
    		if(this.value.trim().length !== this.value.length && this.value!==''){
    			var s = document.createElement('div');
    			s.innerText  = this.value;
    			s.className = 'label';
    			wraper.insertBefore(s, text);
    			this.value ='';

    		}
    	}

    	// function handleKeyDown(e,self){
    	// 	console.log(e)
    	// 	if(self.value == '') return;
    	// 	else if( e&&e.keyCode==13){
    	// 		console.log('按下了空格键')
    	// 	}
    	// }
    </script>
</html>
